<template>
    <div>
        <div style="display: flex;padding: 5px;">
            <div>
                <div style="color: #aeb0b6;">固有风险</div>
                <div class="gyxy" :style="{ 'background-color': gyinfo.color }">
                    {{ gyinfo.desc }}</div>
            </div>
            <div style="height: 20px;flex: 1;text-align: center;font-size: xxx-large;">{{ Score=='null'||Score==''?'0':Score }}</div>
            <div>
                <div style="color: #aeb0b6;">现有风险</div>
                <div class="gyxy" :style="{ 'background-color': xyinfo.color, 'border-radius': '25% 10%' }">
                    {{ xyinfo.desc }}</div>
            </div>
        </div>
        <van-collapse v-model="activeNames" style="margin-top: 10px;">
            <van-collapse-item title="固有风险" name="1" style="padding: 0px;">
                <div v-if="gy && gy.length > 0">
                    <div class="border_bottom" v-for="(item, index) in gy" :key="index" style="margin-top: 5px;">
                        <div class="title2 " style="background-color: #6096e6;color: aliceblue;">{{ item.RuleTypeName }}
                        </div>
                        <van-row type="flex" style="width: 100%;">
                            <van-col :class="index2 != 1 ? 'middle' : ''" :style="{ flex: item2.span, padding: '5px' }"
                                v-for="(item2, index2) in  title1" :key="index2">{{ item2.name }}</van-col>
                        </van-row>
                        <van-row v-for="(item3, index3) in item.child" :key="index3" type="flex"
                            :style="{ width: '100%', 'padding-left': '5px', background: index3 % 2 == 0 ? '#dce6f1' : '#fff' }">
                            <van-col style="flex: 1;text-align: center;">{{ index3 + 1 }}</van-col>
                            <var-col style="flex: 5;color: black;">{{ item3.DisplayName }}</var-col>
                            <var-col style="flex: 2;text-align: center;color: black;">{{ item3.CurrentValue}} 
                    {{item3.Unit=='null'||item3.Unit==''?'':item3.Unit }}</var-col>
                            <var-col style="flex: 2;text-align: center;">{{ item3.DangerLevelDesc }}</var-col>
                        </van-row>
                    </div>
                </div>
                <div v-else style="text-align: center;">
                    内容无
                </div>
            </van-collapse-item>
            <van-collapse-item title="现有风险" name="2" style="padding: 0px;">
                <div v-if="xy && xy.length > 0">
                    <div class="border_bottom" v-for="(item, index) in xy" :key="index" style="margin-top: 5px;">
                        <div class="title2 " style="background-color: #6096e6;color: aliceblue;">{{ item.RuleTypeName }}
                        </div>
                        <van-row type="flex" style="width: 100%;">
                            <van-col :class="index2 != 1 ? 'middle' : ''" :style="{ flex: item2.span, padding: '5px' }"
                                v-for="(item2, index2) in  title2" :key="index2">{{ item2.name }}</van-col>
                        </van-row>
                        <van-row v-for="(item3, index3) in item.child" :key="index3" type="flex"
                            :style="{ width: '100%', 'padding-left': '5px', background: index3 % 2 == 0 ? '#dce6f1' : '#fff' }">
                            <van-col style="flex: 1;text-align: center;">{{ index3 + 1 }}</van-col>
                            <var-col style="flex: 5;color: black;">{{ item3.DisplayName }}</var-col>
                            <var-col style="flex: 5;text-align: center;color: black;">{{ item3.ClassificationName
                                }}</var-col>
                            <var-col style="flex: 2;text-align: center;">{{ item3.Sort }}</var-col>
                        </van-row>
                    </div>
                </div>
                <div v-else style="text-align: center;">
                    内容无
                </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
import test2 from './test2.json'
export default {
    data() {
        return {
            activeNames: ['1'],
            CompanyCode: this.$route.query.CompanyCode,
            CompanyName: this.$route.query.CompanyName,
            Score: this.$route.query.Score,
            InherentLevelValue: this.$route.query.InherentLevelValue, //固有风险
            DangerLevel: this.$route.query.DangerLevel,
            xy: [],
            gy: [],
            gyinfo: {},
            xyinfo: {},
            title1: [{ name: '序号', span: 1 }, { name: '名称', span: 5 }, { name: '数量', span: 2 }, { name: '判断等级', span: 2 }],
            title2: [{ name: '序号', span: 2 }, { name: '名称', span: 5 }, { name: '类型', span: 5 }, { name: '加减分', span: 2 }]
        }
    },
    created() {
        this.$store.state.title = this.$route.query.CompanyName
        this.$axios.get('/DangerEnterpriseDts/GetPageData', {
            params: {
                page: 0,
                dataType: 'dangerLevelOrgCompanyList',
                companyCode: this.CompanyCode,
                limit: '999'
            }
        }).then((res) => {

            res.data.Data.forEach(element => {

                if (element.Type == 1) {
                    this.duData(element, this.gy)
                } else {
                    this.duData(element, this.xy)

                }
            });
            //设置 如果 固有风险没有数据 则打开现有
            if (this.gy && this.gy.length > 0) {
                this.activeNames = ['1']
            } else if (this.xy && this.xy.length > 0) {
                this.activeNames = ['2']
            }

        })
        this.gyinfo = this.duScore(this.InherentLevelValue)
        this.xyinfo = this.duScore(this.DangerLevel)


    },
    methods: {
        duData(element, array) {
            let has = array.some(element_2 => {
                return element_2.RuleType == element.RuleType
            });
            if (has) {
                let target = array.find(e => e.RuleType == element.RuleType)
                target.child.push(element)

            } else {
                let new_element = Object.assign({}, element)
                array.push(new_element)
                new_element.child = []
                new_element.child.push(element)

            }
        },
        duScore(value) {
            let desc
            let color
            switch (value) {
                case '1':
                    desc = '重大风险'
                    color = '#ff0000'
                    break
                case '2':
                    desc = '较大风险'
                    color = '#e1653f'
                    break
                case '3':
                    desc = '一般风险'
                    color = '#e6bd1a'
                    break
                case '4':
                    desc = '低风险'
                    color = '#00bfdc'
                    break
                case '5':
                    desc = '轻微风险'
                    color = '#9233ff'
                    break
                default:
                    desc = '未设置'
                    color = '#46b344'
            }
            return { desc, color }
        }
    }

}
</script>

<style lang="less" scoped>
.title2 {
    background-color: rgb(96, 150, 230);
    color: aliceblue;
    border-radius: 5px 5px 0px 0px;
    padding: 5px;
}

.th_row {
    width: 180px;
}

.middle {
    text-align: center;
}

.border_bottom {
    border-bottom: 1mm ridge #73212b26;
}

.gyxy {
    width: 110px;
    margin-top: 5px;
    background-color: #ff0000;
    color: aliceblue;
    padding: 10px;
    border-radius: 10% 25%;
    text-align: center;
    font-size: large
}
</style>